<!-- 兑换卡业绩查询 -->

<template>
	<view class="box">
		<view class="search_box">
			<view class="search_box_item" @click="onShowTime('start_date')">
				<u-icon name="e60a" size="34" custom-prefix="iconfont" :color="judegstart_dateNull?'#D33647':''" />
				<view class="search_box_time" :style='{color:judegstart_dateNull?"#000000":"#999999"}'>
					{{judegstart_dateNull?dataForm.start_date:'请输入开始时间'}}
				</view>
			</view>
			<view class="search_box_item" @click="onShowTime('end_date')">
				<u-icon name="e60a" size="34" custom-prefix="iconfont" :color="judegend_dateNull?'#D33647':''" />
				<view class="search_box_time" :style='{color:judegend_dateNull?"#000000":"#999999"}'>
					{{judegend_dateNull?dataForm.end_date:'请输入结束时间'}}
				</view>
			</view>
			<view class="search_box_item" style="padding:10rpx 20rpx">
				<u-icon name="e752" size="34" custom-prefix="iconfont" :color="judegNameNull?'#D33647':''" />
				<view class="search_box_time">
					<u-input v-model="dataForm.name" :clearable='false' placeholderStyle="color:#999999" />
				</view>
			</view>
		</view>
		<view class="search" @click="onSearch">搜索</view>


		<view class="box_content " v-if="dataList[0]">
			<view class="box_content_item" v-for="(item,index) in dataList" :key='item.pk_id'>
				<view class="box_content_item_top">
					<view class="box_content_item_order">{{item.order_no}}</view>
					<view class="box_content_item_order">{{ formatDate(item.date_creation) }}</view>
				</view>
				<view class="box_content_item_content">
					<image :src="formatPictureImg(item.img)" class="box_content_item_img" mode="aspectFill"></image>
					<view class="box_content_right">
						<view class="u-flex">
							<view class="box_content_item_label">卡号名称：</view>
							<view class="line-1">{{item.name}}</view>
						</view>
						<view class="u-flex">
							<view class="box_content_item_label">兑换人姓名：</view>
							<view class="line-1">{{item.user_name}}</view>
						</view>
						<view class="u-flex">
							<view class="box_content_item_label">兑换码：</view>
							<view class="line-1">{{item.code}}</view>
						</view>
						<view class="u-flex">
							<view class="box_content_item_label">金额：</view>
							<view class="line-1 color-price ">￥{{item.amount}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="empty" v-else>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>

		<u-picker v-model="timeShow" mode="time" start_date-year='2021' :params="timeParams" @confirm='onConfirm'
			@cancel='onCancel' />
			<sww-login/>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	import {
		pageShare
	} from '@/mixins/pageShare';
	export default {
		mixins: [pageShare, pagingMixin],
		data() {
			return {
				formatDate,
				dataForm: {
					start_date: '',
					end_date: '',
					name: ''
				},
				timeShow: false,
				type: '', //判断是开始还是结束的时间
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				}
			}
		},
		computed: {
			paramsObj() {
				let {
					start_date,
					end_date,
					name
				} = this.dataForm
				let params = {
					start_date: start_date.trim() || undefined,
					end_date: end_date.trim() || undefined,
					name: name.trim() || undefined,
				}
				return params
			},
			judegstart_dateNull() {
				return !!this.dataForm.start_date
			},
			judegend_dateNull() {
				return !!this.dataForm.end_date
			},
			judegNameNull() {
				return !!this.dataForm.name
			},
		},
		onReachBottom() {
			this._load_data()
		},
		onLoad() {
			this.initPage()
		},
		methods: {
			initPage() {
				this.$login('initPage').then(() => {
					this._init_data('GetElectronCodeUsageRecord', this.paramsObj);
				})

			},
			onSearch() {
				this.$login('onSearch').then(() => {
					let {
						start_date,
						end_date,
						name
					} = this.dataForm
					if (!start_date && end_date) {
						this.$toast('请选择开始时间')
						return
					}
					if (start_date && !end_date) {
						this.$toast('请选择结束时间')
						return
					}
					this.initPage()
				})

			},
			onConfirm(val) {
				let {
					type
				} = this
				let time = `${val.year}-${val.month}-${val.day}`
				this.dataForm[type] = time
			},
			onCancel() {
				this.timeShow = false
			},
			onShowTime(type) {
				this.type = type
				this.timeShow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 26rpx;
		background-color: #F5F5F5;
		min-height: 100vh;

		.search_box {
			padding: 30rpx;
			width: 100%;
			border-radius: 14rpx;
			background-color: #ffffff;
			box-shadow: 0 0 5rpx rgba(0, 0, 0, .2);

			.search_box_item {
				color: #999999;
				display: flex;
				border-bottom: 1px solid rgba(0, 0, 0, .1);
				padding: 25rpx 20rpx;

				.search_box_time {
					margin-left: 30rpx;
				}
			}
		}

		.search {
			width: 600rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			color: #FFFFFF;
			background-color: #D33647;
			border-radius: 15rpx;
			margin: 30rpx auto 0;
		}

		.box_content {
			margin-top: 40rpx;
			color: rgba(0, 0, 0, .7);

			.box_content_item {
				padding: 26rpx;
				width: 100%;
				margin-bottom: 26rpx;
				background-color: #ffffff;

				.box_content_item_top {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #f5f5f5;
					padding-bottom: 15rpx;
				}
			}

			.box_content_item_content {
				display: flex;
				padding-top: 26rpx;

				.box_content_item_img {
					width: 200rpx;
					height: 200rpx;
					margin-right: 26rpx;
					border-radius: 15rpx;
				}

				.box_content_right {
					flex: 1;
					// padding: 10rpx 0;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
				}
			}

			.box_content_item_label {
				display: inline-block;
				width: 180rpx;
			}

		}

		.line-1 {
			width: 230rpx;
			white-space: normal;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			word-break: break-all;
		}

		.color-price {
			color: #D33647;
		}

		.empty {
			margin-top: 300rpx;
		}

	}
</style>
